import React, { PureComponent, Suspense } from 'react';
import { connect } from 'dva';
import { Card, Col, Row, Table, message, Select } from 'antd';

import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from './MailManage.less';

import OfflineData from '@/pages/AnalysisSystem/Option/OfflineData';
import { TimelineChart } from '@/components/Charts';

import Groupedcolumn from '@/pages/PositionSystem/MailManage/Groupedcolumn';

/* eslint react/no-multi-comp:0 */
@connect(({ mailManageRule, loading }) => ({
  mailManageRule,
  loading: loading.models.mailManageRule,
}))
class MailManage extends PureComponent {
  state = {
    mailParam: {
      date: 'today',
    },
  };

  tableColSpan = {
    sellPutCount: 0,
    sellPutIndex: -1,
    sellCallCount: 0,
    sellCallIndex: -1,
    buyPutCount: 0,
    buyPutIndex: -1,
    buyCallCount: 0,
    buyCallIndex: -1,
  };

  tableColSpanTwo = {
    sellPutCount: 0,
    sellPutIndex: -1,
    sellCallCount: 0,
    sellCallIndex: -1,
    buyPutCount: 0,
    buyPutIndex: -1,
    buyCallCount: 0,
    buyCallIndex: -1,
  };

  tableMarginTop = 70;

  tableHeadPadding = 10;

  min4 = 0;

  min = 0;

  renderContentBase = (value, row, index) => {
    const obj = {
      children: value,
      props: {},
    };
    obj.props.style = { textAlign: 'center' };
    return obj;
  };

  renderContent = (value, row, index) => {
    const obj = {
      children: value,
      props: {},
    };
    if (index === 3) {
      obj.props.colSpan = 0;
    }
    obj.props.style = { textAlign: 'center' };
    return obj;
  };

  fundNameRenderContent = (value, row, index) => {
    const obj = {
      children: value,
      props: {},
    };
    if (index === 0 || index === 4) {
      obj.props.rowSpan = 3;
    }
    if (index === 1 || index === 5) {
      obj.props.rowSpan = 0;
    }
    if (index === 2 || index === 6) {
      obj.props.colSpan = 0;
    }
    if (index === 3) {
      obj.props.colSpan = 12;
    }
    let color = '';
    if (index != 3) {
      color = '#fff2b0';
      obj.children = value;
    } else {
      color = '#f6f6f6';
      obj.children = '';
    }
    obj.props.style = { backgroundColor: color, padding: 16, textAlign: 'center' };
    return obj;
  };

  sellPutRenderContent = (value, row, index) => {
    const obj = {
      children: value,
      props: {},
    };
    if (index === this.tableColSpan.sellPutIndex) {
      obj.props.rowSpan = this.tableColSpan.sellPutCount;
    } else if (index === this.tableColSpan.sellCallIndex) {
      obj.props.rowSpan = this.tableColSpan.sellCallCount;
    } else if (index === this.tableColSpan.buyPutIndex) {
      obj.props.rowSpan = this.tableColSpan.buyPutCount;
    } else if (index === this.tableColSpan.buyCallIndex) {
      obj.props.rowSpan = this.tableColSpan.buyCallCount;
    } else if (value) {
      obj.props.rowSpan = 0;
      obj.props.colSpan = 0;
    }
    return obj;
  };

  sellPutRenderContentTwo = (value, row, index) => {
    const obj = {
      children: value,
      props: {},
    };
    if (index === this.tableColSpanTwo.sellPutIndex) {
      obj.props.rowSpan = this.tableColSpanTwo.sellPutCount;
    } else if (index === this.tableColSpanTwo.sellCallIndex) {
      obj.props.rowSpan = this.tableColSpanTwo.sellCallCount;
    } else if (index === this.tableColSpanTwo.buyPutIndex) {
      obj.props.rowSpan = this.tableColSpanTwo.buyPutCount;
    } else if (index === this.tableColSpanTwo.buyCallIndex) {
      obj.props.rowSpan = this.tableColSpanTwo.buyCallCount;
    } else if (value) {
      obj.props.rowSpan = 0;
      obj.props.colSpan = 0;
    }
    return obj;
  };

  fundInfoTitleArr = [
    '基金',
    ' ',
    '多头市值',
    '空头市值',
    '持仓盈亏',
    '当日盈亏',
    '历史累计盈亏',
    '待收权力金',
    '总计盈利',
    '盈利市值比',
    '总盈利百分比',
    '仓位占比',
  ];

  fundInfoDataIndexArr = [
    'fundname',
    'typename',
    'buyingupmarketValue',
    'shortsalesmarketValue',
    'opsitiongainandloss',
    'daygainandloss',
    'historygainandloss',
    'dueinpremium',
    'sumgainandloss',
    'ratio',
    'profit',
    'position',
  ];

  fundCodePositionTitleArr = [
    '序号',
    '股票代码',
    '买卖方向',
    '成本价',
    '当前价格',
    '盈亏幅度',
    '盈亏金额',
    '当日盈亏',
    '初始金额',
    '当前金额',
    '股数',
    '买入理由',
    '止损价格',
    '开仓时间',
  ];

  fundCodePositionDataIndexArr = [
    'idx',
    'symbol',
    'tradedirection',
    'costprice',
    'nowprice',
    'profit',
    'profitmoney',
    'dayprofit',
    'initialmoney',
    'nowmoney',
    'count',
    'buyreason',
    'stoplossPrice',
    'openpositiontime',
  ];

  fundOptionPositionTwoTitleArr = [
    '序号',
    '类型',
    '股票代码',
    '执行价',
    '现价',
    '距执行价幅度',
    '成本价',
    '当前价格',
    '当日盈亏',
    '盈亏金额',
    '初始权利金',
    '当前剩余权利金',
    '剩余权利金比例',
    '股数',
    '到期日',
    '剩余天数',
    '头寸规模',
    '操作时间',
  ];

  fundOptionPositionTwoDataIndexArr = [
    'idx',
    'type',
    'code',
    'strikeprice',
    'nowprice',
    'percentagedifference',
    'costprice',
    'currentprice',
    'dayprofit',
    'profit',
    'initialpremium',
    'remainpremium',
    'remainpremiumratio',
    'count',
    'duedate',
    'remainday',
    'positionsize',
    'handledate',
  ];

  handleChange(value) {
    this.tableColSpan = {
      sellPutCount: 0,
      sellPutIndex: -1,
      sellCallCount: 0,
      sellCallIndex: -1,
      buyPutCount: 0,
      buyPutIndex: -1,
      buyCallCount: 0,
      buyCallIndex: -1,
    };

    this.tableColSpanTwo = {
      sellPutCount: 0,
      sellPutIndex: -1,
      sellCallCount: 0,
      sellCallIndex: -1,
      buyPutCount: 0,
      buyPutIndex: -1,
      buyCallCount: 0,
      buyCallIndex: -1,
    };

    const { dispatch } = this.props;
    const { mailParam } = this.state;
    if (value) {
      mailParam.date = value;
    }
    dispatch({
      type: 'mailManageRule/GetFundInfo',
      payload: mailParam,
    });

    dispatch({
      type: 'mailManageRule/GetFundCodePosition',
      payload: mailParam,
    });

    dispatch({
      type: 'mailManageRule/GetFundOptionPositionTwo',
      payload: mailParam,
    });

    dispatch({
      type: 'mailManageRule/GetFundOptionPositionFour',
      payload: mailParam,
    });

    dispatch({
      type: 'mailManageRule/GetFundBaseValue2',
      payload: mailParam,
      callback: response => {
        if (response.data.fundInfo.length > 0) {
          this.min = response.data.fundInfo[0].basevalue;
        }
        for (let i = 0; i < response.data.fundInfo.length; i++) {
          this.min = Math.min(response.data.fundInfo[i].basevalue, this.min);
          this.min = Math.min(response.data.fundInfo[i].inxpercent, this.min);
        }
      },
    });

    dispatch({
      type: 'mailManageRule/GetFundBaseValue4',
      payload: mailParam,
      callback: response => {
        if (response.data.fundInfo.length > 0) {
          this.min4 = response.data.fundInfo[0].basevalue;
        }
        for (let i = 0; i < response.data.fundInfo.length; i++) {
          this.min4 = Math.min(response.data.fundInfo[i].basevalue, this.min4);
          this.min4 = Math.min(response.data.fundInfo[i].inxpercent, this.min4);
        }
      },
    });
  }

  // 默认加载数据-起始方法
  render() {
    const {
      mailManageRule: {
        fundInfoData,
        fundCodePositionData,
        fundOptionPositionTwoData,
        fundOptionPositionFourData,
        dateListData,
        fundBaseValue2Data,
        fundBaseValue4Data,
      },
    } = this.props;

    const fundInfoColumns = [];
    for (let i = 0; i < this.fundInfoTitleArr.length; i++) {
      fundInfoColumns.push({
        title: this.fundInfoTitleArr[i],
        dataIndex: this.fundInfoDataIndexArr[i],
        render: this.renderContent,
        key: this.fundInfoDataIndexArr[i],
      });
      if (this.fundInfoDataIndexArr[i] == 'fundname') {
        fundInfoColumns[i].width = 130;
        fundInfoColumns[i].render = this.fundNameRenderContent;
      }
    }
    const newFundInfoData = [];
    for (let i = 0; i < fundInfoData.data.length; i++) {
      fundInfoData.data[i].buyingupmarketValue = parseFloat(
        fundInfoData.data[i].buyingupmarketValue
      ).toFixed(2);
      fundInfoData.data[i].shortsalesmarketValue = parseFloat(
        fundInfoData.data[i].shortsalesmarketValue
      ).toFixed(2);
      fundInfoData.data[i].opsitiongainandloss = parseFloat(
        fundInfoData.data[i].opsitiongainandloss
      ).toFixed(2);
      fundInfoData.data[i].daygainandloss = parseFloat(fundInfoData.data[i].daygainandloss).toFixed(
        2
      );
      fundInfoData.data[i].historygainandloss = parseFloat(
        fundInfoData.data[i].historygainandloss
      ).toFixed(2);
      fundInfoData.data[i].openpositiontime = parseFloat(
        fundInfoData.data[i].openpositiontime
      ).toFixed(2);
      fundInfoData.data[i].key = `00${i}`;
      if (i === 3) {
        newFundInfoData.push({ key: `000${i}` });
      } else if (i < 3) {
        newFundInfoData.push(fundInfoData.data[i]);
      } else if (i > 3) {
        newFundInfoData.push(fundInfoData.data[i - 1]);
        if (i === 5) {
          newFundInfoData.push(fundInfoData.data[5]);
        }
      }
    }

    const fundCodePositionColumns = [];
    for (let i = 0; i < this.fundCodePositionTitleArr.length; i++) {
      fundCodePositionColumns.push({
        title: this.fundCodePositionTitleArr[i],
        dataIndex: this.fundCodePositionDataIndexArr[i],
        render: this.renderContentBase,
        key: this.fundCodePositionDataIndexArr[i],
      });
    }
    const newFundCodePositionData = [];
    for (let i = 0; i < fundCodePositionData.data.length; i++) {
      if (fundCodePositionData.data[i].tradedirection) {
        fundCodePositionData.data[i].idx = i + 1;
        fundCodePositionData.data[i].costprice = parseFloat(
          fundCodePositionData.data[i].costprice
        ).toFixed(2);
        fundCodePositionData.data[i].nowprice = parseFloat(
          fundCodePositionData.data[i].nowprice
        ).toFixed(2);
        fundCodePositionData.data[i].profit = parseFloat(
          fundCodePositionData.data[i].profit
        ).toFixed(2);
        fundCodePositionData.data[i].stoplossPrice = parseFloat(
          fundCodePositionData.data[i].stoplossPrice
        ).toFixed(2);
        fundCodePositionData.data[i].openpositiontime = !fundCodePositionData.data[i]
          .openpositiontime
          ? ' '
          : fundCodePositionData.data[i].openpositiontime.substring(0, 10);
      }
      if (fundCodePositionData.data[i].tradedirection === 1) {
        fundCodePositionData.data[i].tradedirection = '多头';
      } else if (fundCodePositionData.data[i].tradedirection === 2) {
        fundCodePositionData.data[i].tradedirection = '空头';
      }
      fundCodePositionData.data[i].key = `00${i}`;
      newFundCodePositionData.push(fundCodePositionData.data[i]);
    }

    const fundOptionPositionTwoColumns = [];
    for (let i = 0; i < this.fundOptionPositionTwoTitleArr.length; i++) {
      fundOptionPositionTwoColumns.push({
        title: this.fundOptionPositionTwoTitleArr[i],
        dataIndex: this.fundOptionPositionTwoDataIndexArr[i],
        render: this.renderContentBase,
        key: this.fundOptionPositionTwoDataIndexArr[i],
      });
      if (this.fundOptionPositionTwoDataIndexArr[i] == 'type') {
        fundOptionPositionTwoColumns[i].render = this.sellPutRenderContentTwo;
      } else if (
        this.fundOptionPositionTwoDataIndexArr[i] == 'duedate' ||
        this.fundOptionPositionTwoDataIndexArr[i] == 'handledate'
      ) {
        fundOptionPositionTwoColumns[i].width = 135;
      }
    }

    const newFundOptionPositionTwoData = [];
    let twoIdx = 0;
    for (let i = 0; i < fundOptionPositionTwoData.data.length; i++) {
      if (fundOptionPositionTwoData.data[i].type) {
        twoIdx++;
        fundOptionPositionTwoData.data[i].idx = twoIdx;
        fundOptionPositionTwoData.data[i].strikeprice = parseFloat(
          fundOptionPositionTwoData.data[i].strikeprice
        ).toFixed(2);
        fundOptionPositionTwoData.data[i].nowprice = parseFloat(
          fundOptionPositionTwoData.data[i].nowprice
        ).toFixed(2);
        fundOptionPositionTwoData.data[i].percentagedifference = parseFloat(
          fundOptionPositionTwoData.data[i].percentagedifference
        ).toFixed(2);
        fundOptionPositionTwoData.data[i].costprice = parseFloat(
          fundOptionPositionTwoData.data[i].costprice
        ).toFixed(2);
        fundOptionPositionTwoData.data[i].currentprice = parseFloat(
          fundOptionPositionTwoData.data[i].currentprice
        ).toFixed(2);
        fundOptionPositionTwoData.data[i].remainpremiumratio = parseFloat(
          fundOptionPositionTwoData.data[i].remainpremiumratio
        ).toFixed(2);
        if (fundOptionPositionTwoData.data[i].type == '1') {
          this.tableColSpanTwo.sellPutCount++;
          if (this.tableColSpanTwo.sellPutIndex == -1) {
            this.tableColSpanTwo.sellPutIndex = i;
          }
          fundOptionPositionTwoData.data[i].type = 'sellput';
        } else if (fundOptionPositionTwoData.data[i].type == '2') {
          this.tableColSpanTwo.sellCallCount++;
          if (this.tableColSpanTwo.sellCallIndex == -1) {
            this.tableColSpanTwo.sellCallIndex = i;
          }
          fundOptionPositionTwoData.data[i].type = 'sell call';
        } else if (fundOptionPositionTwoData.data[i].type == '3') {
          this.tableColSpanTwo.buyPutCount++;
          if (this.tableColSpanTwo.buyPutIndex == -1) {
            this.tableColSpanTwo.buyPutIndex = i;
          }
          fundOptionPositionTwoData.data[i].type = 'buyput';
        } else if (fundOptionPositionTwoData.data[i].type == '4') {
          this.tableColSpanTwo.buyCallCount++;
          if (this.tableColSpanTwo.buyCallIndex == -1) {
            this.tableColSpanTwo.buyCallIndex = i;
          }
          fundOptionPositionTwoData.data[i].type = 'buy call';
        }
      }
      fundOptionPositionTwoData.data[i].key = `00${i}`;
      fundOptionPositionTwoData.data[i].duedate = !fundOptionPositionTwoData.data[i].duedate
        ? ' '
        : fundOptionPositionTwoData.data[i].duedate.substring(0, 10);
      fundOptionPositionTwoData.data[i].handledate = !fundOptionPositionTwoData.data[i].handledate
        ? ' '
        : fundOptionPositionTwoData.data[i].handledate.substring(0, 10);
      newFundOptionPositionTwoData.push(fundOptionPositionTwoData.data[i]);
    }
    let fourIdx = 0;
    const fundOptionPositionFourColumns = [];
    for (let i = 0; i < this.fundOptionPositionTwoTitleArr.length; i++) {
      fundOptionPositionFourColumns.push({
        title: this.fundOptionPositionTwoTitleArr[i],
        dataIndex: this.fundOptionPositionTwoDataIndexArr[i],
        render: this.renderContentBase,
        key: this.fundOptionPositionTwoDataIndexArr[i],
      });
      if (this.fundOptionPositionTwoDataIndexArr[i] == 'type') {
        fundOptionPositionFourColumns[i].render = this.sellPutRenderContent;
      } else if (
        this.fundOptionPositionTwoDataIndexArr[i] == 'duedate' ||
        this.fundOptionPositionTwoDataIndexArr[i] == 'handledate'
      ) {
        fundOptionPositionFourColumns[i].width = 135;
      }
    }
    const newFundOptionPositionFourData = [];
    for (let i = 0; i < fundOptionPositionFourData.data.length; i++) {
      if (fundOptionPositionFourData.data[i].type) {
        fourIdx++;
        fundOptionPositionFourData.data[i].idx = fourIdx;
        fundOptionPositionFourData.data[i].strikeprice = parseFloat(
          fundOptionPositionFourData.data[i].strikeprice
        ).toFixed(2);
        fundOptionPositionFourData.data[i].nowprice = parseFloat(
          fundOptionPositionFourData.data[i].nowprice
        ).toFixed(2);
        fundOptionPositionFourData.data[i].percentagedifference = parseFloat(
          fundOptionPositionFourData.data[i].percentagedifference
        ).toFixed(2);
        fundOptionPositionFourData.data[i].costprice = parseFloat(
          fundOptionPositionFourData.data[i].costprice
        ).toFixed(2);
        fundOptionPositionFourData.data[i].currentprice = parseFloat(
          fundOptionPositionFourData.data[i].currentprice
        ).toFixed(2);
        fundOptionPositionFourData.data[i].remainpremiumratio = parseFloat(
          fundOptionPositionFourData.data[i].remainpremiumratio
        ).toFixed(2);
        if (fundOptionPositionFourData.data[i].type == '1') {
          this.tableColSpan.sellPutCount++;
          if (this.tableColSpan.sellPutIndex == -1) {
            this.tableColSpan.sellPutIndex = i;
          }
          fundOptionPositionFourData.data[i].type = 'sellput';
        } else if (fundOptionPositionFourData.data[i].type == '2') {
          this.tableColSpan.sellCallCount++;
          if (this.tableColSpan.sellCallIndex == -1) {
            this.tableColSpan.sellCallIndex = i;
          }
          fundOptionPositionFourData.data[i].type = 'sell call';
        } else if (fundOptionPositionFourData.data[i].type == '3') {
          this.tableColSpan.buyPutCount++;
          if (this.tableColSpan.buyPutIndex == -1) {
            this.tableColSpan.buyPutIndex = i;
          }
          fundOptionPositionFourData.data[i].type = 'buyput';
        } else if (fundOptionPositionFourData.data[i].type == '4') {
          this.tableColSpan.buyCallCount++;
          if (this.tableColSpan.buyCallIndex == -1) {
            this.tableColSpan.buyCallIndex = i;
          }
          fundOptionPositionFourData.data[i].type = 'buy call';
        }
      }
      fundOptionPositionFourData.data[i].key = `00${i}`;
      fundOptionPositionFourData.data[i].duedate = !fundOptionPositionFourData.data[i].duedate
        ? ' '
        : fundOptionPositionFourData.data[i].duedate.substring(0, 10);
      fundOptionPositionFourData.data[i].handledate = !fundOptionPositionFourData.data[i].handledate
        ? ' '
        : fundOptionPositionFourData.data[i].handledate.substring(0, 10);
      newFundOptionPositionFourData.push(fundOptionPositionFourData.data[i]);
    }

    const { Option } = Select;

    const children = [];
    if (dateListData.data.length > 0) {
      for (let i = 0; i < dateListData.data.length; i++) {
        children.push(
          <Option key={!dateListData.data[i] ? ' ' : dateListData.data[i].substring(0, 10)}>
            {!dateListData.data[i] ? ' ' : dateListData.data[i].substring(0, 10)}
          </Option>
        );
      }
    }

    const newFundBaseValue2LineData = [];
    const newFundBaseValue2BarData = [];
    for (let i = 0; i < fundBaseValue2Data.data.fundInfo.length; i += 1) {
      newFundBaseValue2LineData.push({
        x: new Date(fundBaseValue2Data.data.fundInfo[i].basedate.substring(0, 10)).getTime(),
        y1: fundBaseValue2Data.data.fundInfo[i].basevalue,
        y2: fundBaseValue2Data.data.fundInfo[i].inxpercent,
      });
    }

    let fields = [];
    if (fundBaseValue2Data.data.fundMonthModels.length > 0) {
      const reVal = new Object();
      const reVal1 = new Object();
      reVal.name = '2号基金月收益';
      reVal1.name = '大盘月收益';
      for (let i = 0; i < fundBaseValue2Data.data.fundMonthModels.length; i++) {
        reVal[fundBaseValue2Data.data.fundMonthModels[i].date] =
          fundBaseValue2Data.data.fundMonthModels[i].fundPercent;
        reVal1[fundBaseValue2Data.data.fundMonthModels[i].date] =
          fundBaseValue2Data.data.fundMonthModels[i].npxpercent;
      }
      newFundBaseValue2BarData.push(reVal);
      newFundBaseValue2BarData.push(reVal1);
      fields = Object.keys(newFundBaseValue2BarData[0]);
      fields.splice(0, 1);
    }

    let barMin = 0;
    if (fundBaseValue2Data.data.fundMonthModels.length > 0) {
      barMin = fundBaseValue2Data.data.fundMonthModels[0].fundPercent;
      for (let i = 0; i < fundBaseValue2Data.data.fundMonthModels.length; i++) {
        barMin = Math.min(fundBaseValue2Data.data.fundMonthModels[i].fundPercent, barMin);
        barMin = Math.min(fundBaseValue2Data.data.fundMonthModels[i].npxpercent, barMin);
        if (barMin > fundBaseValue2Data.data.fundMonthModels[i].fundPercent) {
          barMin = fundBaseValue2Data.data.fundMonthModels[i].fundPercent;
        }
        if (barMin > fundBaseValue2Data.data.fundMonthModels[i].npxpercent) {
          barMin = fundBaseValue2Data.data.fundMonthModels[i].npxpercent;
        }
      }
    }

    const newFundBaseValue4LineData = [];
    const newFundBaseValue4BarData = [];
    for (let i = 0; i < fundBaseValue4Data.data.fundInfo.length; i += 1) {
      newFundBaseValue4LineData.push({
        x: new Date(fundBaseValue4Data.data.fundInfo[i].basedate.substring(0, 10)).getTime(),
        y1: fundBaseValue4Data.data.fundInfo[i].basevalue,
        y2: fundBaseValue4Data.data.fundInfo[i].inxpercent,
      });
    }
    let fields4 = [];
    if (fundBaseValue4Data.data.fundMonthModels.length > 0) {
      const reVal = new Object();
      const reVal1 = new Object();
      reVal.name = '4号基金月收益';
      reVal1.name = '大盘月收益';
      for (let i = 0; i < fundBaseValue4Data.data.fundMonthModels.length; i++) {
        reVal[fundBaseValue4Data.data.fundMonthModels[i].date] =
          fundBaseValue4Data.data.fundMonthModels[i].fundPercent;
        reVal1[fundBaseValue4Data.data.fundMonthModels[i].date] =
          fundBaseValue4Data.data.fundMonthModels[i].npxpercent;
      }
      newFundBaseValue4BarData.push(reVal);
      newFundBaseValue4BarData.push(reVal1);
      fields4 = Object.keys(newFundBaseValue4BarData[0]);
      fields4.splice(0, 1);
    }

    let barMin4 = 0;
    if (fundBaseValue4Data.data.fundMonthModels.length > 0) {
      barMin4 = fundBaseValue4Data.data.fundMonthModels[0].fundPercent;
      for (let i = 0; i < fundBaseValue4Data.data.fundMonthModels.length; i++) {
        barMin4 = Math.min(fundBaseValue4Data.data.fundMonthModels[i].fundPercent, barMin4);
        barMin4 = Math.min(fundBaseValue4Data.data.fundMonthModels[i].npxpercent, barMin4);
        if (barMin4 > fundBaseValue4Data.data.fundMonthModels[i].fundPercent) {
          barMin4 = fundBaseValue4Data.data.fundMonthModels[i].fundPercent;
        }
        if (barMin4 > fundBaseValue4Data.data.fundMonthModels[i].npxpercent) {
          barMin4 = fundBaseValue4Data.data.fundMonthModels[i].npxpercent;
        }
      }
    }

    return (
      <PageHeaderWrapper title="邮件管理">
        {
          <Card bordered={false}>
            <Row>
              <span style={{ textStyle: 'inline' }}>
                <span
                  style={{
                    fontSize: 16,
                    textAlign: 'left',
                    paddingTop: this.tableHeadPadding * 0.5,
                    paddingBottom: this.tableHeadPadding,
                    marginRight: '1rem',
                    fontWeight: '600',
                  }}
                >
                  按日期查询
                </span>
                {dateListData.data.length === 0 ? (
                  ''
                ) : (
                  <span className={styles.mailManage}>
                    <Select
                      defaultValue={
                        !dateListData.data[0] ? '' : dateListData.data[0].substring(0, 10)
                      }
                      style={{ width: '600', paddingRight: '100' }}
                      onChange={this.handleChange.bind(this)}
                    >
                      {children}
                    </Select>
                  </span>
                )}
              </span>
            </Row>
            {newFundInfoData.length === 0 ? (
              <div />
            ) : (
              <div className={styles.mailManage}>
                <h1
                  style={{
                    fontSize: 16,
                    textAlign: 'center',
                    paddingTop: this.tableHeadPadding,
                    paddingBottom: this.tableHeadPadding,
                  }}
                >
                  {!newFundInfoData[0].statdate
                    ? ' '
                    : newFundInfoData[0].statdate.substring(0, 10)}
                  -汇总表
                </h1>
                <Table
                  pagination={false}
                  columns={fundInfoColumns}
                  dataSource={newFundInfoData}
                  rowClassName={(record, index) => (index === 3 ? styles.fff1f0 : styles.ffffff)}
                  bordered
                />
              </div>
            )}

            {newFundBaseValue2LineData.length === 0 ? (
              <div />
            ) : (
              <TimelineChart
                tickInterval={60 * 60 * 1000 * 24 * 5 * 2 * 2}
                yMin={this.min}
                height={400}
                data={newFundBaseValue2LineData}
                titleMap={{
                  y1: '2号基金净值',
                  y2: '标普500',
                }}
              />
            )}

            {newFundBaseValue2BarData.length === 0 ? (
              <div />
            ) : (
              <div style={{ paddingTop: this.tableMarginTop }}>
                <Groupedcolumn ymin={barMin} fields={fields} data={newFundBaseValue2BarData} />
              </div>
            )}

            {newFundBaseValue4LineData.length === 0 ? (
              <div />
            ) : (
              <TimelineChart
                // 最坑的在这个地方，要在每次网络返回数据的时候重置最小值
                yMin={this.min4}
                height={400}
                data={newFundBaseValue4LineData}
                tickInterval={60 * 60 * 1000 * 24 * 5 * 2 * 2}
                titleMap={{
                  y1: '4号基金净值',
                  y2: '标普500',
                }}
              />
            )}

            {newFundBaseValue4BarData.length === 0 ? (
              <div />
            ) : (
              <div style={{ paddingTop: this.tableMarginTop }}>
                <Groupedcolumn ymin={barMin4} fields={fields4} data={newFundBaseValue4BarData} />
              </div>
            )}

            {newFundCodePositionData.length === 0 ? (
              <div />
            ) : (
              <div style={{ paddingTop: this.tableMarginTop }}>
                <h1
                  style={{
                    backgroundColor: '#fff2b0',
                    fontSize: 16,
                    textAlign: 'center',
                    paddingTop: this.tableHeadPadding,
                    paddingBottom: this.tableHeadPadding,
                  }}
                >
                  当前持仓-
                  {!newFundCodePositionData[0].statdate
                    ? ''
                    : newFundCodePositionData[0].statdate.substring(0, 10)}
                </h1>
                <Table
                  className={styles.fundCodePositionTable}
                  style={{ marginTop: -8 }}
                  pagination={false}
                  columns={fundCodePositionColumns}
                  dataSource={newFundCodePositionData}
                  rowClassName={(record, index) =>
                    !record.tradedirection ? styles.statisticssTableBackground : styles.ffffff
                  }
                  bordered
                />
              </div>
            )}

            {newFundOptionPositionTwoData.length === 0 ? (
              <div />
            ) : (
              <div style={{ paddingTop: this.tableMarginTop }}>
                <h1
                  style={{
                    backgroundColor: '#fff2b0',
                    fontSize: 16,
                    textAlign: 'center',
                    paddingTop: this.tableHeadPadding,
                    paddingBottom: this.tableHeadPadding,
                  }}
                >
                  2号基金期权跟踪表
                </h1>
                <Table
                  className={styles.fundCodePositionTable}
                  style={{ marginTop: -8 }}
                  pagination={false}
                  columns={fundOptionPositionTwoColumns}
                  dataSource={newFundOptionPositionTwoData}
                  rowClassName={(record, index) =>
                    !record.type ? styles.statisticssTableBackground : styles.ffffff
                  }
                  bordered
                />
              </div>
            )}

            {newFundOptionPositionFourData.length === 0 ? (
              <div />
            ) : (
              <div style={{ paddingTop: this.tableMarginTop }}>
                <h1
                  style={{
                    backgroundColor: '#fff2b0',
                    fontSize: 16,
                    textAlign: 'center',
                    paddingTop: this.tableHeadPadding,
                    paddingBottom: this.tableHeadPadding,
                  }}
                >
                  4号基金期权跟踪表
                </h1>
                <Table
                  className={styles.fundCodePositionTable}
                  style={{ marginTop: -8 }}
                  pagination={false}
                  columns={fundOptionPositionFourColumns}
                  dataSource={newFundOptionPositionFourData}
                  rowClassName={(record, index) =>
                    !record.type ? styles.statisticssTableBackground : styles.ffffff
                  }
                  bordered
                />
              </div>
            )}
          </Card>
        }
      </PageHeaderWrapper>
    );
  }

  // 加载完 之后 再加载 此 方法
  componentDidMount() {
    const { dispatch } = this.props;
    const { mailParam } = this.state;
    dispatch({
      type: 'mailManageRule/GetDateList',
      payload: mailParam,
    });
    this.handleChange();
  }
}

export default MailManage;
